CSS Grid sritys: semantinių išdėstymo pavadinimų konvencijų kūrimas globaliam žiniatinklio kūrimui

CSS Grid iš esmės pakeitė žiniatinklio išdėstymą, suteikdamas kūrėjams neprilygstamą kontrolę ir lankstumą. CSS Grid įrankių rinkinyje Grid sritys išsiskiria kaip ypač galinga funkcija, leidžianti apibrėžti vardinius regionus jūsų tinklelyje ir priskirti jiems turinį. Tačiau tikrasis Grid sričių potencialas atsiskleidžia jas susiejus su gerai apibrėžtomis, semantinėmis pavadinimų konvencijomis. Šiame vadove nagrinėjama, kaip nustatyti šias konvencijas, siekiant sukurti patikimus, prižiūrimus ir prieinamus žiniatinklio išdėstymus, kurie būtų skirti pasaulinei auditorijai.

CSS Grid sričių supratimas

Prieš pasineriant į pavadinimų konvencijas, trumpai apžvelkime, kas yra CSS Grid sritys.

Su CSS Grid jūs apibrėžiate tinklo struktūrą naudodami tokias savybes kaip grid-template-columns ir grid-template-rows. Tada Grid sritys leidžia jums priskirti pavadinimus konkretiems šio tinklo regionams. Pavyzdžiui:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header  header"
    "nav    main    aside"
    "footer footer  footer";
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

Šiame pavyzdyje sukūrėme pagrindinį išdėstymą su antrašte, navigacija, pagrindinio turinio sritimi, šonine juosta ir porašte. Savybė grid-template-areas vizualiai atspindi tinklo struktūrą, todėl iš pirmo žvilgsnio lengva suprasti išdėstymą. Tada savybė grid-area priskiria kiekvieną elementą atitinkamai sričiai.

Kodėl semantinės pavadinimų konvencijos yra svarbios

Nors aukščiau pateiktas pavyzdys veikia, labai svarbu priimti semantines pavadinimų konvencijas dėl kelių priežasčių:

• Priežiūra: Gerai pavadintos sritys palengvina jūsų CSS supratimą ir modifikavimą, ypač dideliuose projektuose. Aiškūs pavadinimai perteikia kiekvienos srities paskirtį, sumažina kognityvinę apkrovą ir padidina derinimą.
• Mastelio keitimas: Semantiniai pavadinimai skatina kodo pakartotinį naudojimą ir palengvina modulinių išdėstymų kūrimą. Augant jūsų projektui, galite lengvai pritaikyti ir išplėsti savo tinklo struktūrą neįvesdami neatitikimų.
• Prieinamumas: Ekrano skaitytuvai ir kitos pagalbinės technologijos remiasi semantiniu HTML, kad suprastų žiniatinklio puslapio struktūrą. Naudojant semantinius pavadinimus jūsų CSS Grid išdėstyme sustiprinama pagrindinė HTML struktūra ir pagerinamas prieinamumas.
• Internacionalizacija (i18n) ir lokalizacija (l10n): Naudojant abstrakčius semantinius pavadinimus, o ne pavadinimus, susietus su konkrečiomis vizualinėmis savybėmis, galima lanksčiau prisitaikyti prie skirtingų kalbų ir kultūrinių kontekstų. „Šoninė juosta“ gali tapti „navigacijos“ elementu iš dešinės į kairę kalbos išdėstyme, o naudojant neutralų pavadinimą, pvz., „svetainės navigacija“, palengvinamas šis pakeitimas.
• Komandinis bendradarbiavimas: Nuoseklios pavadinimų konvencijos pagerina komunikaciją ir bendradarbiavimą kūrimo komandose. Visi supranta kiekvienos tinklo srities paskirtį, sumažindami klaidų ir neatitikimų riziką.

Pagrindiniai semantinio pavadinimo principai

Štai keletas pagrindinių principų, kuriais galite vadovautis semantinėse pavadinimų konvencijose:

1. Apibūdinkite turinį, o ne poziciją

Venkite pavadinimų, susietų su konkrečiomis pozicijomis tinklelyje, pvz., „viršutinis kairysis“ arba „apatinis dešinysis“. Vietoj to, sutelkite dėmesį į turinio, kuris užims sritį, apibūdinimą. Pavyzdžiui, naudokite „svetainės antraštė“ vietoj „viršutinės eilutės“ ir „pagrindinis turinys“ vietoj „centrinės srities“. Tai padaro jūsų kodą atsparesnį išdėstymo struktūros pakeitimams.

Pavyzdys:

Blogai:

.container {
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
}

.logo {
  grid-area: top-left;
}

Gerai:

.container {
  grid-template-areas:
    "site-logo  site-navigation"
    "main-content  advertisement";
}

.logo {
  grid-area: site-logo;
}

„Geras“ pavyzdys yra labiau aprašomasis ir lengviau suprantamas, net nematant faktinio išdėstymo.

2. Naudokite nuoseklią terminologiją

Nustatykite nuoseklų žodyną dažniems išdėstymo elementams ir laikykitės jo visame projekte. Tai padeda išlaikyti aiškumą ir sumažinti painiavą. Pavyzdžiui, nuosekliai naudokite „svetainės navigacija“ vietoj perjungimo tarp „pagrindinė navigacija“, „globali navigacija“ ir „viršutinė navigacija“.

3. Būkite pakankamai konkretūs

Nors svarbu vengti pernelyg konkrečių pavadinimų, susietų su pozicijomis, taip pat turite užtikrinti, kad jūsų pavadinimai būtų pakankamai aprašomieji, kad būtų galima atskirti skirtingas sritis. Pavyzdžiui, jei turite kelias navigacijos sritis, naudokite tokius pavadinimus kaip „svetainės navigacija“, „antrinė navigacija“ ir „poraštės navigacija“, kad jas atskirtumėte.

4. Apsvarstykite hierarchiją

Jei jūsų išdėstyme yra įdėtos tinklo sritys, apsvarstykite galimybę atspindėti hierarchiją savo pavadinimų konvencijoje. Pavyzdžiui, galite naudoti priešdėlius arba priesagas, kad nurodytumėte pirminę sritį. Pavyzdžiui, jei antraštėje turite navigacijos sritį, galite ją pavadinti „antraštės navigacija“.

5. Atsižvelkite į internacionalizaciją (i18n) ir lokalizaciją (l10n)

Kurdami pasaulinei auditorijai, apsvarstykite, kaip jūsų pavadinimų konvencijos gali paveikti internacionalizaciją ir lokalizaciją. Venkite naudoti pavadinimus, kurie yra būdingi konkrečiai kalbai ar kultūrai. Vietoj to rinkitės abstraktesnius ir neutralesnius terminus, kuriuos galima lengvai išversti arba pritaikyti prie skirtingų kontekstų.

Pavyzdys:

Vietoj to, kad naudotumėte „šoninę juostą“, kuri reiškia konkretų vizualinį išdėstymą, apsvarstykite galimybę naudoti „svetainės navigacija“ arba „puslapio šoninė juosta“, kurie yra neutralesni ir gali būti pritaikyti prie skirtingų išdėstymo krypčių ir kultūrinių konvencijų.

6. Atskyrimui naudokite brūkšnelius arba pabraukimus

Norėdami atskirti žodžius tinklo srities pavadinimuose, naudokite brūkšnelius (-) arba pabraukimus (_). Čia svarbiausia yra nuoseklumas. Pasirinkite vieną ir laikykitės jo. Brūkšneliai paprastai teikiami pirmenybė CSS, nes jie atitinka CSS savybių pavadinimų konvencijas (pvz., grid-template-areas).

7. Pavadinimai turi būti trumpi

Nors aprašomieji pavadinimai yra svarbūs, venkite, kad jie būtų per ilgi ar žodiniai. Siekite pusiausvyros tarp aiškumo ir glaustumo. Trumpesnius pavadinimus lengviau skaityti ir atsiminti.

Praktiniai semantinių pavadinimų konvencijų pavyzdžiai

Pažvelkime į keletą praktinių pavyzdžių, kaip pritaikyti šiuos principus skirtinguose scenarijuose.

1 pavyzdys: Pagrindinis svetainės išdėstymas

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "site-header  site-header  site-header"
    "site-navigation  main-content  page-aside"
    "site-footer  site-footer  site-footer";
}

.header {
  grid-area: site-header;
}

.nav {
  grid-area: site-navigation;
}

.main {
  grid-area: main-content;
}

.aside {
  grid-area: page-aside;
}

.footer {
  grid-area: site-footer;
}

Šiame pavyzdyje naudojome semantinius pavadinimus, tokius kaip „svetainės antraštė“, „svetainės navigacija“, „pagrindinis turinys“, „puslapio šoninė juosta“ ir „svetainės poraštė“, kad aiškiai apibrėžtume kiekvienos tinklo srities paskirtį.

2 pavyzdys: Elektroninės prekybos produkto puslapis

.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "product-title product-title"
    "product-image product-details"
    "product-description product-description";
}

.product-title {
  grid-area: product-title;
}

.product-image {
  grid-area: product-image;
}

.product-details {
  grid-area: product-details;
}

.product-description {
  grid-area: product-description;
}

Čia naudojome tokius pavadinimus kaip „produkto pavadinimas“, „produkto vaizdas“, „produkto informacija“ ir „produkto aprašymas“, kad atspindėtume konkretų elektroninės prekybos produkto puslapio turinį.

3 pavyzdys: Tinklaraščio įrašo išdėstymas su įdėtu tinklu

.blog-post {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "post-header post-header"
    "post-content sidebar"
    "post-footer post-footer";
}

.post-header {
  grid-area: post-header;
}

.post-content {
  grid-area: post-content;
}

.sidebar {
  grid-area: sidebar;
  display: grid; /* Nested Grid */
  grid-template-rows: auto auto;
  grid-template-areas:
    "sidebar-advertisement"
    "sidebar-categories";
}

.sidebar-advertisement {
  grid-area: sidebar-advertisement;
}

.sidebar-categories {
  grid-area: sidebar-categories;
}

.post-footer {
  grid-area: post-footer;
}

Šiame pavyzdyje naudojome įdėtą tinklą šoninės juostos srityje. Įdėtas tinklas naudoja tokius pavadinimus kaip „šoninės juostos reklama“ ir „šoninės juostos kategorijos“, kad nurodytų, jog šios sritys yra šoninės juostos vaikai.

Įrankiai ir metodai tinklo sričių pavadinimams tvarkyti

Kai jūsų projektai tampa sudėtingesni, galbūt norėsite apsvarstyti galimybę naudoti įrankius ir metodus, kurie padėtų tvarkyti jūsų tinklo sričių pavadinimus.

• CSS preprocesoriai (Sass, Less): CSS preprocesoriai leidžia apibrėžti kintamuosius ir mišinius jūsų tinklo sričių pavadinimams, todėl juos lengviau pakartotinai naudoti ir prižiūrėti.
• CSS moduliai: CSS moduliai padeda apriboti jūsų CSS taisykles atskiriems komponentams, išvengiant pavadinimų konfliktų ir pagerinant moduliškumą.
• Pavadinimų konvencijų dokumentacija: Sukurkite dokumentą, kuriame būtų aprašytos jūsų projekto pavadinimų konvencijos, skirtos tinklo sritims, ir pasidalykite juo su savo komanda. Tai padeda užtikrinti nuoseklumą ir aiškumą.

Prieinamumo aspektai

Nors semantinės pavadinimų konvencijos pagerina bendrą CSS Grid išdėstymų struktūrą ir prižiūrimumą, svarbu atsižvelgti ir į prieinamumą.

• Naudokite semantinį HTML: Įsitikinkite, kad jūsų HTML elementai yra semantiškai prasmingi ir tiksliai atspindi jų turinį. Pavyzdžiui, naudokite elementus <header>, <nav>, <main>, <aside> ir <footer>, kad suskirstytumėte puslapį.
• Pateikite alternatyvų tekstą vaizdams: Visada pateikite aprašomąjį alternatyvų tekstą vaizdams, kad jie būtų prieinami ekrano skaitytuvams.
• Naudokite ARIA atributus: Kai kuriais atvejais jums gali reikėti naudoti ARIA atributus, kad pateiktumėte papildomos semantinės informacijos pagalbinėms technologijoms. Pavyzdžiui, galite naudoti atributą role, kad apibrėžtumėte tinklo srities paskirtį.
• Išbandykite su ekrano skaitytuvais: Reguliariai išbandykite savo svetainę su ekrano skaitytuvais, kad įsitikintumėte, jog ji yra prieinama vartotojams su negalia.

Išvada

CSS Grid sritys siūlo galingą būdą apibrėžti ir struktūrizuoti jūsų žiniatinklio išdėstymus. Priimdami semantines pavadinimų konvencijas, galite sukurti išdėstymus, kurie yra ne tik vizualiai patrauklūs, bet ir prižiūrimi, keičiamo mastelio, prieinami ir pritaikomi pasaulinei auditorijai. Nepamirškite sutelkti dėmesį į turinio apibūdinimą, nuoseklios terminologijos naudojimą, pakankamai konkretų buvimą, hierarchijos apsvarstymą, atsižvelgimą į internacionalizaciją, brūkšnelių ar pabraukimų naudojimą ir pavadinimų glaustumą. Laikydamiesi šių principų, galite išnaudoti visą CSS Grid sričių potencialą ir sukurti žiniatinklio patirtis, kurios iš tikrųjų yra pasaulinio lygio.

Žiniatinklio kūrimui nuolat tobulėjant, tokių semantinių praktikų kaip šios laikymasis tampa vis svarbesnis kuriant patikimas ir įtraukias skaitmenines patirtis visiems.